/**
 * tabbar样式
 */

import {
  ComponentInternalInstance,
  computed,
  ref,
  CSSProperties
} from "vue"
import {
  TabbarItem,
  TabbarProps
} from '../../../types/tn-tabbar'
import { ZIndex } from '../../../config'
import { ColorInfo } from '../../../types/tuniao-ui'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit, uuid } from '../../../utils'

import useBulgeButton, { BulgeButtonInfo } from "./useBulgeButton"

export default function useTabbarStyle(instance: ComponentInternalInstance) {

  let props: TabbarProps;

  let itemID = ref<string>(uuid())

  const {
    bulgeButtonInfo,
    getTabbarItemRectInfo,
    updateBulgeProps
  } = useBulgeButton(instance, itemID.value)

  // 更新props数据
  const updatePropsData = (_props: TabbarProps) => {
    props = _props,
    updateBulgeProps(_props)
  }

  // tabbar列表数据
  const data = computed<TabbarItem[]>(() => {
    if (!props?.data) return []
    return props.data as TabbarItem[]
  })

  const { splitColorInfo } = useComponentColor()
  // 解析背景颜色
  const bgColor = computed<ColorInfo>(() => {
    return splitColorInfo('bg', props?.bgColor || '')
  })
  // 解析字体颜色
  const color = computed<(index: number) => ColorInfo>(() => {
    return (index: number) => {
      // 获取对应的item
      const item: TabbarItem = data.value[index]
      if (index === Number(props?.modelValue)) {
        return splitColorInfo('color', item?.activeColor || props?.activeColor || '')
      }
      return splitColorInfo('color', item?.color || props?.color || '')
    }
  })
  // 解析已激活的颜色
  const activeColor = computed<(index: number) => ColorInfo>(() => {
    return (index: number) => {
      // 获取对应的item
      const item: TabbarItem = data.value[index]
      return splitColorInfo('color', item?.activeColor || props?.activeColor || '')
    }
  })

  // 对应item显示的icon信息
  const itemIcon = computed<(index: number) => string>(() => {
    return (index: number) => {
      let icon: string = ''

      const item: TabbarItem = data.value[index]
      icon = index === Number(props?.modelValue) ? item?.activeIcon : item?.icon

      return icon
    }
  })
  // 判断icon是否为图片
  const isImageIcon = computed<(index: number) => boolean>(() => {
    return (index: number) => {
      const item: TabbarItem = data.value[index]
      const icon: string = (index === Number(props?.modelValue)) ? item.activeIcon : item.icon
      return icon.indexOf('/') !== -1
    }
  })

  // 底部导航栏样式
  const tabbarStyle = computed<CSSProperties>(() => {
    let style: CSSProperties = {}

    // 设置高度
    if (props?.height) {
      style.height = handleValueWithUnit(props.height)
    }
    style.zIndex = Number(props?.zIndex || ZIndex.tabbar) - 1

    return style
  })
  // 底部导航栏对应的类
  const tabbarClass = computed<string>(() => {
    let clazz: string[] = []

    if (props?.shadow) {
      clazz.push('shadow')
    }
    if (props?.fixed) {
      clazz.push('fixed')
    }
    if (props?.safeAreaInsetBottom) {
      clazz.push('tn-safe-area-inset-bottom')
    }

    return clazz.join(' ')
  })

  // 背景颜色样式
  const bgStyle = computed<CSSProperties>(() => {
    let style: CSSProperties = {}
    if (bgColor.value.type === 'style') {
      style.backgroundColor = bgColor.value.value
    }
    if (props?.frostedGlass && props?.frostedGlassColor) {
      style.backgroundColor = props.frostedGlassColor
    }
    return style
  })
  // 背景颜色对应的类
  const bgClass = computed<string>(() => {
    let clazz: string[] = []

    if (!props?.frostedGlass && bgColor.value.type === 'class') {
      clazz.push(bgColor.value.value)
    }
    if (props?.frostedGlass) {
      clazz.push('frosted-glass')
    }

    return clazz.join(' ')
  })

  // itemWrapper样式
  const itemWrapperStyle = computed<CSSProperties>(() => {
    let style: CSSProperties = {}

    style.zIndex = Number(props?.zIndex || ZIndex.tabbar)

    return style
  })

  // item样式
  const itemStyle = computed<(index: number, type?: 'normal' | 'icon') => CSSProperties>(() => {
    return (index: number, type: 'normal' | 'icon' = 'normal') => {
      let style: CSSProperties = {}
      const item: TabbarItem = data.value[index]

      if (color.value(index).type === 'style') {
        style.color = color.value(index).value
      }
      if (props?.fontSize) {
        style.fontSize = handleValueWithUnit(props.fontSize)
      }
      if (item?.fontSize) {
        style.fontSize = handleValueWithUnit(item.fontSize)
      }
      if (type === 'icon') {
        if (props?.iconSize) {
          style.fontSize = handleValueWithUnit(props.iconSize)
        }
        if (item?.iconSize) {
          style.fontSize = handleValueWithUnit(item.iconSize)
        }
      }

      return style
    }
  })
  // item对应的类
  const itemClass = computed<(index: number) => string>(() => {
    return (index: number) => {
      let clazz: string[] = []

      if (color.value(index).type === 'class') {
        clazz.push(color.value(index).value)
      }
      if (index === Number(props?.modelValue)) {
        clazz.push('active')
        if (props?.animation) {
          clazz.push('animation')
        }
      }

      return clazz.join(' ')
    }
  })

  // itemIcon样式
  const itemIconStyle = computed<(index: number, type: 'icon' | 'image') => CSSProperties>(() => {
    return (index: number, type: 'icon' | 'image') => {
      let style: CSSProperties = {}
      const item: TabbarItem = data.value[index]

      let iconSize: string = ''
      if (item?.iconSize || props?.iconSize) {
        iconSize = handleValueWithUnit(item.iconSize || props.iconSize)
        if (type === 'image') {
          style.width = iconSize
          style.height = style.width
        } else {
          style.fontSize = iconSize
        }
      }

      return style
    }
  })

  // 凸起按钮样式
  const bulgeStyle = computed<(index: number) => CSSProperties>(() => {
    return (index: number) => {
      let style: CSSProperties = {}

      const item: BulgeButtonInfo = bulgeButtonInfo.value[index]
      style.width = `${item.width}px`
      style.height = style.width
      if (bgColor.value.type === 'style') {
        style.backgroundColor = bgColor.value.value
      }
      if (props?.zIndex) {
        style.zIndex = Number(props.zIndex) + 1
      }
      style.left = `${item.left}px`

      return style
      }
  })
  // 凸起按钮对应的类
  const bulgeClass = computed<(index: number) => string>(() => {
    return (index: number) => {
      let clazz: string[] = []

      if (bgColor.value.type === 'class') {
        clazz.push(bgColor.value.value)
      }

      if (index === Number(props?.modelValue)) {
        clazz.push('active')
        if (props?.animation) {
          clazz.push('animation')
        }
      }
      if (props?.shadow) clazz.push('shadow')

      return clazz.join(' ')
    }
  })

  // 凸起按钮图标样式
  const bulgeIconStyle = computed<(index: number) => CSSProperties>(() => {
    return (index: number) => {
      let style: CSSProperties = {}
      
      if (activeColor.value(index).type === 'style') {
        style.backgroundColor = activeColor.value(index).value
      }
      return style
    }
  })
  // 凸起按钮对应的类
  const bulgeIconClass = computed<(index: number) => string>(() => {
    return (index: number) => {
      let clazz: string[] = []
      if (activeColor.value(index).type === 'class') {
        const value: string = activeColor.value(index).value
        if (value.indexOf('tn-bg-') !== -1) {
          clazz.push(value.replace('tn-bg-', 'tn-color-'))
        }
      }
      return clazz.join(' ')
    }
  })

  return {
    itemID,
    data,
    itemIcon,
    isImageIcon,
    tabbarStyle,
    tabbarClass,
    bgStyle,
    bgClass,
    itemWrapperStyle,
    itemStyle,
    itemClass,
    itemIconStyle,
    bulgeStyle,
    bulgeClass,
    bulgeButtonInfo,
    bulgeIconStyle,
    bulgeIconClass,
    updatePropsData,
    getTabbarItemRectInfo
  }
}